<template>
	<view class="content">
		<view class="content_top">
			<image class="background-image" src="../../static/img/bg.png"></image>

		</view>
		<view class="content_bottom" :style="{ height: dynamicHeight }">
			<view class="content_bottom_success">
				<view class="content_bottom_success_icon">
					<image src="../../static/img/suceess.png" mode="widthFix" style="width: 420rpx;"></image>
				</view>
				<view class="" v-if="ageStatus==0">
					<view class=""
						style="font-family: PingFang SC;font-weight: 500;font-size: 48rpx;color: #333333;text-align: center;margin-top: 70rpx;line-height: 48rpx;">
						提交成功
					</view>
					<view class="content_bottom_success_title">
						<view class="content_bottom_success_title_img">
							<image src="../../static/img/error.png" mode="widthFix" style="width: 56rpx;    vertical-align: middle;
				margin-top: 8rpx;"></image>
						</view>
						<view class="content_bottom_success_title_det">
							您已属于超龄人员
						</view>
					</view>
				</view>

				<view class="" v-if="ageStatus==1">
					<view class=""
						style="font-family: PingFang SC;font-weight: 500;font-size: 48rpx;color: #333333;text-align: center;margin-top: 70rpx;line-height: 48rpx;">
						提交成功
					</view>
					<view class="content_bottom_success_title">
						<view class="content_bottom_success_title_img">
							<image src="../../static/img/ wring.png" mode="widthFix" style="width: 56rpx;    vertical-align: middle;
					margin-top: 8rpx;"></image>
						</view>
						<view class="content_bottom_success_title_det" style="color: #F19149;">
							您已属于高龄人员
						</view>
					</view>
				</view>

				<view class="content_bottom_success_titles" v-if="ageStatus==2">
					<view class=""
						style="font-family: PingFang SC;font-weight: 500;font-size: 48rpx;color: #333333;text-align: center;margin-top: 70rpx;line-height: 48rpx;">
						提交成功
					</view>
					<view class="content_bottom_success_title_det" style="font-family: PingFang SC;font-weight: 500;margin-top: 30rpx;font-size: 28rpx;color: #999999;">
						您的信息已提交成功，请等待审核
					</view>
				</view>
			</view>
			<view class="content_bottom_list">
				<view class="content_bottom_list_btn" @click="toindex()">
					<span>完成</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ageStatus: '',
				dynamicHeight: '', // 默认高度样式
			}
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: (info) => {
					console.log(info,'info')
					if (info.screenHeight <= 667) { // 假设iPhone X的高度是812像素
						this.dynamicHeight = 'calc(100% + 200rpx)'; // 如果设备高度小于iPhone X，则添加额外的200rpx
					}else{
						this.dynamicHeight = 'calc(100% - 200rpx)';
					}
				},
			});
			// 接收 ageStatus 参数

			this.ageStatus = parseInt(options.ageStatus);
			console.log(this.ageStatus, 'this.ageStatus')
		},
		methods: {
		toindex(){
		uni.switchTab({
			url: '../../pages/index/index'
		});
		},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		/* 占据整个视口高度 */
		display: flex;
		flex-direction: column;
		position: relative;
		/* 相对定位，以便子元素可以相对于它定位 */
	}

	.content_top {

		position: relative;
		/* 设置相对定位，以便子元素可以相对于它定位 */
		width: 100%;
		/* 宽度百分之百 */
		height: 500rpx;
		/* 设置高度 */
		overflow: hidden;

		/* 触发 BFC */
		.background-image {
			position: absolute;
			/* 设置绝对定位，让背景图充满整个父容器 */
			top: 0;
			left: 0;
			width: 100%;
			/* 宽度百分之百 */
			height: 100%;
			/* 高度百分之百 */
			object-fit: cover;
			/* 图片填充父容器 */
			z-index: -1;
			/* 将背景图放到底层 */
		}

		.content_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 33rpx 73rpx 0 73rpx;

			.content_top_box_left {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
			}

			.content_top_box_right {}
		}
	}

	.content_bottom {
		flex: 1;
		/* 自动填充剩余空间 */
		position: absolute;
		/* 绝对定位，覆盖在 .content_top 上方 */
		top: 200rpx;
		/* 位于父容器顶部下方 200rpx 处 */
		width: 100%;
		/* 宽度百分之百 */
		height: calc(100% - 50rpx);
		/* 高度占满父容器下方 */
		background-color: #F8F9FD;
		/* 背景色，可根据需要修改 */
		z-index: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		/* 确保在 content_top 之下 */
		// display: flex;
		// justify-content: center;
		// align-items: center;
		.content_bottom_success {
			margin-top: 240rpx;
			text-align: center;
		}

		.content_bottom_success_title {
			display: flex;
			justify-content: center;
			/* text-align: center; */
			align-items: center;
			margin-top: 88rpx;

			.content_bottom_success_title_det {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 48rpx;
				color: #FF2D2D;
				margin-left: 26rpx;
			}
		}

		.content_bottom_list {
			position: absolute;
			bottom: 83rpx;
			left: 5%;

			.content_bottom_list_btn {
				text-align: center;

				span {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #FFFFFF;
					background: linear-gradient(90deg, #3A84FD 0%, #536AFF 100%);
					border-radius: 20rpx;
					padding: 25rpx 300rpx;
				}
			}
		}




	}
</style>